<template>
  <div>
<h1>显示页面</h1>
投资名称：<input type="text" v-model="state.TName">
投资总额度：<input type="text" v-model="state.Min">-<input type="text" v-model="state.Max">
<input type="button" value="查询" @click="show">
<table>
  <tr>
    <td>投资名称</td>
    <td>投资总额度</td>
    <td>已投资额度</td>
    <td>剩余额度</td>
    <td>投资人数</td>
    <td>操作</td>
  </tr>
  <tr v-for="item in list">
    <td>{{item.TName}}</td>
    <td>{{item.ZongE}}</td>
    <td>{{item.YiTou}}</td>
    <td>{{item.ShengYu}}</td>
    <td>{{item.Number}}</td>
    <td>
      <input type="button" value="删除" @click="del(item.Tid)">
      <input type="button" value="修改" @click="gai(item.Tid)">
    </td>
  </tr>
</table>
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs,onMounted} from 'vue'
import axios from 'axios'
import {useRoute,useRouter} from 'vue-router'
const router=useRouter()
const route=useRoute()

let data:any=reactive({
  state:{
    TName:'',
    Max:'',
    Min:''
  },
  list:[]
})

let {state,list}=toRefs(data)

onMounted(()=>{
  show()
})

const show=()=>{
axios({
  url:'/api/TouZi/Show',
  method:'get',
  params:state.value
})
.then(res=>{
  console.log(res.data);
  list.value=res.data.data;
  console.log(res.data.data.length);
})
.catch(err=>{
  console.log(err);
  
})
}

const del=(Tid:any)=>{
const f=confirm('确认删除吗？');
if(f){
  axios({
    url:'/api/TouZi/ShanChu',
    method:'get',
    params:{
      Tid:Tid
    }
  })
  .then(res=>{
    if(res.data.data>0){
      alert('删除成功');
      show()
    }
    else{
      alert('删除失败');
    }
  })
  .catch(err=>{
    console.log(err);
    
  })
}
}

const gai=(Tid:any)=>{
router.push({
  path:'/update',
  query:{
    Tid:Tid
  }
})
}
</script>

<style scoped>

</style>